<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Marp</title>
    <script>window.jQuery = window.$ = require('jquery');</script>

    <link rel="stylesheet" href="node_modules/photon/dist/css/photon.css" />
    <link rel="stylesheet" href="node_modules/codemirror/lib/codemirror.css" />
    <link rel="stylesheet" href="css/index.css" />
  </head>

  <body>
    <div class="window">
      <div class="window-content">
        <div class="pane-group">
          <div class="pane markdown">
            <textarea id="editor" wrap="soft"></textarea>
            <div class="pane-splitter left"></div>
          </div>
          <div class="pane preview">
            <div class="pane-splitter right"></div>
            <div class="preview-loading"><img src="./images/throbbers/white.svg" class="throbber" /></div>
            <webview id="preview" autosize="on" preload="./js/slide.js" src="slide.html" blinkFeatures="CSSVariables"></webview>
          </div>
        </div>
      </div>
      <footer class="toolbar toolbar-footer">
        <div class="toolbar-actions">
          <span id="page-indicator"></span>
          <div class="btn-group pull-right disabled" id="preview-modes">
            <button class="btn btn-default viewmode-btn" id="preview-mode-markdown" data-viewmode="markdown" title="Markdown">
              <span class="icon icon-pencil"></span>
            </button>
            <button class="btn btn-default viewmode-btn" id="preview-mode-screen" data-viewmode="screen" title="1:1 Slide">
              <span class="icon icon-monitor"></span>
            </button>
            <button class="btn btn-default viewmode-btn" id="preview-mode-list" data-viewmode="list" title="Slide List">
              <span class="icon icon-doc-text"></span>
            </button>
          </div>
        </div>
      </footer>
    </div>
    <div id="exporting-indicator">
      <div id="exporting-indicator-modal">
        <img src="./images/throbbers/blue.svg" class="throbber" />
        Exporting slide PDF...
      </div>
    </div>
  </body>

  <script src="js/index.js"></script>
</html>
